import React from "react";
import { NavBar, Space, Toast, Button } from "antd-mobile";
import { CloseCircleOutline, CheckCircleOutline } from "antd-mobile-icons";

import { useNavigate, useLocation, useParams } from "react-router-dom";

type Props = {};

function Classfiy({}: Props) {
  const navigate = useNavigate();
  const { state } = useLocation();
  const { id } = useParams();
  const back = () => {
    Toast.show({
      content: "点击了返回区域",
      duration: 1000,
    });
    navigate("/index/class");
  };
  return (
    <div
      style={{ background: "rgb(244 241 241)", width: "100%", height: "100%" }}
    >
      <div
        className="order-details"
        style={{
          width: "100%",
          height: "250px",
          margin: "0 auto",
          background: "rgb(27, 169, 186)",
          borderRadius: "0 0 15px 15px",
        }}
      >
        <div className="detailsTitle">
          <NavBar onBack={back} style={{ color: "white" }}>
            订单详情
          </NavBar>
        </div>

        {state.state === "待支付" ? (
          <div className="xqnonav">
            <h3 style={{ fontSize: "20px", color: "red", marginLeft: "10px" }}>
              {state.state}
            </h3>
            <p>
              <span
                style={{ fontSize: "18px", marginRight: "5px", color: "#000" }}
              >
                支付时间
              </span>
              <span
                style={{
                  fontSize: "18px",
                  color: "#FF7A00",
                  marginRight: "10px",
                }}
              >
                58:09分
              </span>
            </p>
          </div>
        ) : (
          <div className="detailsNav">
            <dl>
              <dd>
                {state.state === "购票成功" ? (
                  <CheckCircleOutline />
                ) : (
                  <CloseCircleOutline />
                )}
              </dd>
              <dt>
                <h3>{state.state}</h3>
                <p>您的订单因支付超时取消,可重新定购</p>
              </dt>
            </dl>
          </div>
        )}
      </div>

      <div
        className="order-forGoods"
        style={{
          width: "97%",
          height: "37%",
          zIndex: "999",
          position: "relative",
          top: "-110px",
          margin: "0 auto",
          borderRadius: "10px",
          background: "#ffffff",
        }}
      >
        <div
          className="order-forGoodsPadding"
          style={{ width: "94%", height: "98%", margin: "0 auto" }}
        >
          <div
            className="order-forGoodsName"
            style={{ padding: "15px 0px", color: "rgb(41 39 39)" }}
          >
            取票号：BW123455
          </div>
          <div
            className="order-forGoodsDate"
            style={{
              display: "flex",
              justifyContent: "space-between",
              color: "#ccc",
            }}
          >
            <div>06月15日周二</div>
            <div>06月15日周二</div>
          </div>
          <div
            className="order-forGoodsTime"
            style={{
              display: "flex",
              justifyContent: "space-between",
              marginTop: "10px",
              color: "black",
              fontSize: "25px",
              fontWeight: "600",
            }}
          >
            <div>06：24</div>
            <div>经停信息</div>
            <div>07：21</div>
          </div>
          <div
            className="order-forGoodslocation"
            style={{
              display: "flex",
              justifyContent: "space-between",
              marginTop: "10px",
              color: "rgb(41 39 39)",
            }}
          >
            <div>{state.city}</div>
            <div>G7740</div>
            <div>{state.citys}</div>
          </div>
          <div className="order-forGoodsInformation">
            <div
              className="order-forGoodsTitle"
              style={{
                display: "flex",
                justifyContent: "space-between",
                marginTop: "10px",
                color: "black",
                fontSize: "18px",
                fontWeight: "800",
              }}
            >
              <div>
                {state.name}
                <span
                  style={{
                    color: "#ccc",
                    border: "1px solid #ccc",
                    padding: "3px 3px",
                    fontSize: "12px",
                    marginLeft: "5px",
                  }}
                >
                  成人票
                </span>
              </div>
              <div>一等座￥{state.price}</div>
            </div>
            <div
              className="order-forGoodsCenter"
              style={{
                display: "flex",
                justifyContent: "space-between",
                marginTop: "10px",
                color: "#ccc",
              }}
            >
              <div>身份证 110102**********28</div>
              <div>
                <span
                  style={{
                    color: "green",
                    border: "1px solid green",
                    padding: "3px 3px",
                    fontSize: "12px",
                    marginRight: "5px",
                  }}
                >
                  靠窗
                </span>
                <span style={{ color: "#000" }}>
                  {" "}
                  {state.railway}车厢{state.wagon}号
                </span>
              </div>
            </div>
            <div style={{ marginTop: "10px", color: "green" }}>出票成功</div>
          </div>
        </div>
      </div>
      <div
        className="order-No."
        style={{
          width: "97%",
          height: "15%",
          background: "#ffffff",
          margin: "0 auto",
          borderRadius: "10px",
          marginTop: "-95px",
        }}
      >
        <div
          className="order-No.Ti"
          style={{
            display: "flex",
            justifyContent: "space-between",
            padding: "20px 11px",
            color: "rgb(41 39 39)",
          }}
        >
          <div>订单号</div>
          <div>E369941878</div>
        </div>
        <div
          className="order-No.Phone"
          style={{
            display: "flex",
            justifyContent: "space-between",
            padding: "0 11px",
            color: "rgb(41 39 39)",
          }}
        >
          <div>通知手机</div>
          <div>188123456789</div>
        </div>
      </div>
      <div
        className="ADULT"
        style={{
          width: "97%",
          height: "15%",
          background: "#ffffff",
          margin: "0 auto",
          borderRadius: "10px",
          marginTop: "15px",
        }}
      >
        <div
          className="ADULT-vote"
          style={{
            display: "flex",
            justifyContent: "space-between",
            padding: "20px 11px",
            color: "rgb(41 39 39)",
          }}
        >
          <div>成人票</div>
          <div>￥107x1</div>
        </div>
        <div
          className="order-amount"
          style={{
            display: "flex",
            justifyContent: "space-between",
            padding: "0 11px",
            color: "rgb(41 39 39)",
          }}
        >
          <div>订单总计</div>
          <div style={{ color: "orange", fontSize: "23px" }}>￥107</div>
        </div>
      </div>
      <div className="detalisFoot">
        {/* {state.state === "购票成功" ? (
          ""
        ) : (
          <Button
            block
            shape="rounded"
            style={{ width: "400px", marginTop: "20px" }}
            className="btn"
          >
            重新购票
          </Button>
        )} */}

        {
           state.state === "购票成功"?"":state.state === "待支付"? <Button
           block
           shape="rounded"
           style={{ width: "400px", marginTop: "20px" }}
           className="btn"
         >
           待支付
         </Button>:<Button
           block
           shape="rounded"
           style={{ width: "400px", marginTop: "20px" }}
           className="btn"
         >
           重新购票
         </Button>
        }
      </div>
    </div>
  );
}

export default Classfiy;
